<!-- 柱状图纵 -->
<template>
    <echarts :option="option" class="negativeBarChart"/>
</template>

<script>
import echarts from '@/components/echarts/echarts';
export default {
	name: 'negative-bar-chart',
	data () {
		return {
			option: {
				// title: {
				// 	text: '「 市年龄分布 」',
				// 	textStyle: {
				// 		color: '#52def1'
				// 	},
				// 	left: 'center',
				// 	top: 10
				// },
				// tooltip: {
				//     trigger: 'axis',
				//     axisPointer: {            // 坐标轴指示器，坐标轴触发有效
				//         type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				//     }
				// },
				grid: {
					left: '3%',
					right: '4%',
				},
				xAxis: {
					show: false,
					type: 'value',
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
				},
				yAxis: {
					show: false,
					type: 'category',
					axisTick: {
						show: false
					},
					splitLine: {
						show: false
					}
				},
				series: [
					{
						type: 'bar',
						stack: '总量',
						data: [224, 151, 174, 240, 350, 370],
						itemStyle: {
							color: '#0efcf0',
							shadowColor: '#0efcf0',
							shadowBlur: 20,
						}
					},
					{
						type: 'bar',
						stack: '总量',
						// label: {
						//     show: true,
						//     position: 'left'
						// },
						data: [-120, -101, -134, -190, -230, -210],
						itemStyle: {
							color: 'rgba(236, 145, 133, 0.88)',
							shadowColor: 'rgba(236, 145, 133, 0.88)',
							shadowBlur: 20,
						}
					}
				],
				textStyle: {
					color: '#52def1'
				}
			}
		};
	},

	components: {
		echarts
	},

	computed: {},

	// mounted: {},

	methods: {}
};

</script>
<style lang='less' rel="stylesheet/less" scoped>
.negativeBarChart{
        width:100%;
        height:100% /* 520/80 */
    }
</style>
